﻿@page "/tests/cards"
<Row>
    <Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardImage Source="_content/Blazorise.Demo/img/cards/image-1.jpg" Alt="Placeholder image">
            </CardImage>
            <CardBody>
                <CardTitle Size="5">Card title</CardTitle>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
                <Button Color="Color.Primary">Button</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardImage Source="_content/Blazorise.Demo/img/cards/image-2.jpg" Alt="Placeholder image">
            </CardImage>
            <CardBody>
                <CardTitle Size="5">Card title</CardTitle>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
            </CardBody>
            <ListGroup Flush>
                <ListGroupItem>Cras justo odio</ListGroupItem>
                <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
            </ListGroup>
            <CardBody>
                <CardLink Source="#">Card link</CardLink>
                <CardLink Source="#">Another link</CardLink>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardImage Source="_content/Blazorise.Demo/img/cards/image-3.jpg" Alt="Placeholder image">
            </CardImage>
            <CardBody>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is4.OnTablet.Is3.OnWidescreen.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardBody>
                <CardTitle Size="5">Card title</CardTitle>
                <CardSubtitle>Support card subtitle</CardSubtitle>

            </CardBody>
            <CardImage Source="_content/Blazorise.Demo/img/cards/image-4.jpg" Alt="Placeholder image">
            </CardImage>
            <CardBody>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
                <CardLink Source="#">Card link</CardLink>
                <CardLink Source="#">Another link</CardLink>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is6.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block>Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block>Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block>Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block>Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary" Block>Go somewhere</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Heading Margin="Margin.Is4.OnY">Background variants</Heading>
<Row>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Dark" WhiteText>
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
                <Button Color="Color.Primary">Button</Button>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Primary" WhiteText>
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Success" WhiteText>
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Info" WhiteText>
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Warning" WhiteText>
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsThird.OnTablet.IsFull.OnMobile">
        <Card Margin="Margin.Is4.FromBottom" Background="Background.Dark" WhiteText>
            <CardBody>
                <CardTitle Size="4">Special title treatment</CardTitle>
                <CardText>
                    With supporting text below as a natural lead-in to additional content.
                </CardText>
            </CardBody>
        </Card>
    </Column>
</Row>
<Heading Margin="Margin.Is4.OnY">Stretched link</Heading>
<Row>
    <Column ColumnSize="ColumnSize.IsQuarter.OnTablet.IsFull.OnMobile">
        <Card>
            <CardImage Source="_content/Blazorise.Demo/img/cards/image-3.jpg" Alt="Placeholder image" />
            <CardBody>
                <CardTitle Size="3">
                    Card with stretched link
                </CardTitle>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
                <Link To="#" Title="Link to go somewhere" Stretched>
                    Go somewhere
                </Link>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsQuarter.OnTablet.IsFull.OnMobile">
        <Card>
            <CardImage Source="_content/Blazorise.Demo/img/cards/image-3.jpg" Alt="Placeholder image" />
            <CardBody>
                <CardTitle Size="3">
                    Card with stretched link on a button
                </CardTitle>
                <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                </CardText>
                <Button Type="ButtonType.Link" To="#" Color="Color.Primary" StretchedLink>
                    Go somewhere
                </Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Heading Margin="Margin.Is4.OnY">Groups</Heading>
<CardGroup>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="_content/Blazorise.Demo/img/cards/image-9.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <CardText>
                <Small TextColor="TextColor.Muted">Last updated 1 mins ago</Small>
            </CardText>
        </CardBody>
    </Card>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="_content/Blazorise.Demo/img/cards/image-2.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <CardText>
                <Small TextColor="TextColor.Muted">Last updated 2 mins ago</Small>
            </CardText>
        </CardBody>
    </Card>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="_content/Blazorise.Demo/img/cards/image-3.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                Just a small text.
            </CardText>
            <CardText>
                <Small TextColor="TextColor.Muted">Last updated 3 mins ago</Small>
            </CardText>
        </CardBody>
    </Card>
</CardGroup>
<Heading Margin="Margin.Is4.OnY">Deck</Heading>
<CardDeck>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="_content/Blazorise.Demo/img/cards/image-9.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <CardText>
                <Small TextColor="TextColor.Muted">Last updated 1 mins ago</Small>
            </CardText>
        </CardBody>
    </Card>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="_content/Blazorise.Demo/img/cards/image-2.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
            </CardText>
            <CardText>
                <Small TextColor="TextColor.Muted">Last updated 2 mins ago</Small>
            </CardText>
        </CardBody>
    </Card>
    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="_content/Blazorise.Demo/img/cards/image-3.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                Just a small text.
            </CardText>
            <CardText>
                <Small TextColor="TextColor.Muted">Last updated 3 mins ago</Small>
            </CardText>
        </CardBody>
    </Card>
</CardDeck>